<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../plugins/layui/css/layui.css" />
		<script src="../plugins/layui/layui.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>

		<table class="layui-hide" id="test" lay-filter="test"></table>
		<!-- 头部工具栏  -->
		<script type="text/html" id="toolbarDemo">
		  	
		  	<div class="layui-btn-group" style="float: left;">
			  <button class="layui-btn layui-btn-sm">
			    <i class="layui-icon">&#xe654;</i>
			  </button>
			  <button class="layui-btn layui-btn-sm">
			    <i class="layui-icon">&#xe642;</i>
			  </button>
			  <button class="layui-btn layui-btn-sm">
			    <i class="layui-icon">&#xe640;</i>
			  </button>
			</div>
			<div id="" style="float: left;margin-left: 20px;">
				<div class="layui-input-block"  style="width: 100px;margin: 0px;float: left;">
				    <select>
				        <option value="" style="height: 50px;"></option>
				        <option value="0">订单号</option>
				        <option value="1">申请日期</option>
				        <option value="2">退货</option>
				        <option value="3">换货</option>
				    </select>
				</div>
				<div class="layui-input-block" style="float: left;margin: 0px;">
			      <input type="text" name="title" required  lay-verify="required" autocomplete="off" class="layui-input">
			    </div>
			    <button type="research" class="layui-btn layui-btn-radius"><i class="layui-icon">&#xe615;</i>搜索</button>
			</div>
			
		</script>
		<!-- 右部操作  -->
		<script type="text/html" id="barDemo">
		  <a class="layui-btn layui-btn-xs" lay-event="update">编辑</a>
		  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
		</script>
		
		<script>
			layui.use('table', function() {
				var table = layui.table;
				var lay = layui.layer;

				table.render({
					elem: '#test',
					url: '../dataset/exchange.json',
					toolbar:'#toolbarDemo',
					cols: [
						[{
							type:'checkbox'
						},
						{
							field: 'id',
							title: '订单号',
							sort: true
						}, {
							field: 'message',
							title: '物品信息'
						}, {
							field: 'orderTime',
							title: '下单时间',
							sort: true
						}, {
							field: 'applyTime',
							title: '申请时间',
							sort: true
						}, {
							field: 'consignee',
							title: '收货人',
							minWidth: 30
						}, {
							field: 'address',
							title: '地址'
						}, {
							field: 'money',
							title: '金额',
							sort: true
						}, {
							field: 'state',
							title: '状态',
							fixed:'right'
						}, {
							field: 'operation',
							title: '操作',
							toolbar: '#barDemo',
							fixed:'right'
						}]
					],
					page: true
				});
				//监听工具条
				table.on('tool(test)', function(obj){
				   	if(obj.event === 'delete'){
					    lay.confirm('真的删除行么', function(index){
					        obj.del();
					        lay.close(index);
					    });
				    } else if(obj.event === 'update'){
				      	lay.msg("你单击的是修改!");
						obj.update({
							username:"修改的值"
						});
				    }
				});
			});
		</script>

	</body>

</html>